import { isNumber } from 'lodash';
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, fixNameSpace } from 't/common/utils';
import { defineComponent, onMounted, ref } from 'vue';
import './index.scss';

export default defineComponent({
  name: fixNameSpace('LayoutGrid'),
  props: {
    ...commonProps,
    demo: {
      type: String,
      default() {
        return '';
      },
    },
    height: {
      type: [String, Number],
      default() {
        return '200px';
      },
    },
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const [mappingProps, mappingExpose] = useMappingProps(props);

    expose(mappingExpose);

    onMounted(() => {});

    return () => {
      let height = props.height;
      if (isNumber(height)) {
        height += 'px';
      }

      return (
        <div style={{ height: height }}>
          <div class='row'>
            <div class='col-2'>...</div>
            <div class='col-6'>...</div>
            <div class='col-10'>...</div>
            <div class='col-3'>...</div>
          </div>
        </div>
      );
    };
  },
});
